<template>
  <div class="three">
    <load :state="loading"></load>
    <van-tabs v-model="active" @click="onTabClick" style="width: 100%">
      <van-tab title="全部返利"></van-tab>
      <van-tab title="到账返利"></van-tab>
      <van-tab title="冻结返利"></van-tab>
    </van-tabs>
    <div class="space"></div>
    <van-list v-model="load" :finished="LastData[active]" @load="loadMore(active)">
      <ItemOrderNew
        @click.native="handleItemClick(index)"
        v-for="(item, index) in orderList[active]"
        :key="index"
        :index="index"
        :item-obj="item"
        :type="type"
        :orderType="orderType"
        :tradeStatus=item.status
      />
    </van-list>
    <p v-show="LastData[active]" class="no-more">敬请期待更多产品</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import ItemOrderNew from '../../components/user/ItemOrderNew';
  import OrderType from './OrderType';
  import Load from '../../components/common/load/load';

  export default {
    /** kebab-case */
    name: 'user-order',

    data() {
      return {
        LoadData: [],
        LastData: [],
        active: 0,
        type: 'all',
        loading: true,
        load: false, // 底部上拉加载
        orderType: 'normal',
        pages: [],
        orderList: [],
        status: ''
      };
    },
    props: {},
    created() {
      if (this.$route.query.orderType) {
        this.type = this.$route.query.orderType;
      }
      this.active = this.getDefaultType();
      this.orderList = new Array(6).fill([]);
      this.pages = new Array(6).fill(0);
      this.LoadData = new Array(6).fill(true);
      this.LastData = new Array(6).fill(false);
      this.loadMore(this.active);
    },
    components: {Load, ItemOrderNew},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      handleItemClick(index) {
        // alert(this.orderList[this.active][index].targetId);
        if (this.orderList[this.active][index].targetType === 'order') {
          this.$router.push({
            name: 'orderDetail',
            // query: {id: this.orderList[this.active][index].id, status: this.orderList[this.active][index].status}
            query: {id: this.orderList[this.active][index].targetId}
          });
        }
      },
      onTabClick(index) {
        this.active = index;
        switch (index) {
          case 0:
            this.type = OrderType.All;
            break;
          case 1:
            this.type = OrderType.PendingDelivery;
            this.status = true;
            break;
          case 2:
            this.type = OrderType.Receiving;
            this.status = false;
            break;
          // case 3:
          //   this.type = OrderType.Received;
          //   break;
          // case 5:
          //   this.type = OrderType.AfterSale;
          //   break;
        }
        if (this.pages[index] === 0) {
          this.loadMore(index);
        }
      },
      getDefaultType() {
        let index = 0;
        switch (this.type) {
          case OrderType.All:
            index = 0;
            break;
          // case OrderType.ToBePaid:
          //   index = 1;
          //   break;
          case OrderType.PendingDelivery:
            index = 1;
            break;
          case OrderType.Receiving:
            index = 2;
            break;
          case OrderType.Received:
            index = 3;
            break;
          // case OrderType.AfterSale:
          //   index = 5;
          //   break;
        }
        return index;
      },
      loadMore(index) {
        if (this.LoadData[index] === true) {
          this.load = true;
          this.LoadData[index] = false;
          let query = {
            page: this.pages[index],
            size: '10'
          };
          if (this.status) {
            query.status = this.status;
          }
          // {
          // type: 'normal',
          // status: this.type,
          // page: this.pages[index],
          // size: '10'
          // }
          console.log('getUserOrder:', query, this.active, index, 'this.orderList[index]', this.orderList[index]);
          this.$UserReq.getUserOrder(query).then(res => {
            // 存放数据不同步
            this.orderList[index] = this.orderList[index].concat(res.data);
            console.log('getUserOrdergetUserOrder:', res, res.data, index, this.orderList[index]);
            this.pages[index]++;
            this.loading = false;
            this.load = false;
            // 没有数据了
            let DataNum = res.data.length;
            if (DataNum === 0) {
              this.LoadData[index] = false;
              this.LastData[index] = true;
              return;
            }
            //  打开查询数据接口
            this.LoadData[index] = true;
          }, () => {
            this.loading = false;
          });
        }
      }
    },
    computed: {},
    watch: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .no-more {
    word-vw(12, third-ash);
    flex-center();
    margin-top 10px
    margin-bottom: 30vw;
  }

  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .van-tab--active
    color #000000

  >>> .van-tabs__line {
    left 3px
    background main-color
  }
</style>
